<template>
  <div class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center">
        <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
          YT工单派单管理系统
        </h1>
        <p class="mt-6 max-w-2xl mx-auto text-xl text-gray-500">
          一站式工单管理解决方案，为客户提供便捷服务，为员工提供高效工具，为管理员提供全面管理功能。
        </p>
        <div class="mt-10 flex justify-center gap-4">
          <router-link to="/client" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary-dark shadow-sm">
            客户入口
          </router-link>
          <router-link to="/staff" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm">
            员工入口
          </router-link>
          <router-link to="/admin" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-black shadow-sm">
            管理员入口
          </router-link>
        </div>
      </div>

      <!-- 特性展示 -->
      <div class="mt-20">
        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
                  <i class="fa fa-user-circle text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">客户自助服务</h3>
                  <p class="mt-1 text-sm text-gray-500">
                    客户可以随时创建工单并跟踪处理进度
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
                  <i class="fa fa-tasks text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">员工高效处理</h3>
                  <p class="mt-1 text-sm text-gray-500">
                    工单智能分派，员工可以快速响应和处理工单
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
                  <i class="fa fa-cogs text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">管理全面掌控</h3>
                  <p class="mt-1 text-sm text-gray-500">
                    管理员可以全面监控系统运行状态和数据分析
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>